
<template>
    <div>
        <div style="width: 100%;height: 100px;">
            <div style="margin-top: 30px;margin-left: 30px;float: left;">
                拼团状态：
                <!-- 下拉框 -->
                <el-select v-model="value" placeholder="请选择" >
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            =
            <!-- 搜索 -->
            <div style="margin-top: 30px;margin-left: 30px;float: left;width: 600px;">
                <div style="float: left;margin-top: 10px;">
                    商品搜索：
                </div>
                <div style="width: 300px;float: left">
                    <!-- 下拉框 -->
                    <el-input v-model="input" placeholder="请输入内容">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList(value,input)"></el-button>
                    </el-input>
                </div>
            </div>
        </div>

        <!-- 添加拼团商品 -->
        <el-button type="primary" @click="addto()" style="float: left; margin-left: 30px;margin-bottom: 25px;">添加砍价商品
        </el-button>

        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="ID" prop="id">
            </el-table-column>
            <el-table-column label="商品图片" width="140" align='center'>
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.image" fit="image">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="砍价商品" prop="store_product.store_name">
            </el-table-column>
            <el-table-column label="砍价价格" prop="price">
            </el-table-column>
            <el-table-column label="最低价" prop="min_price">
            </el-table-column>
            <el-table-column label="参与人数" prop="bargain_num">
            </el-table-column>
            <el-table-column label="帮砍价人数" prop="bargain_num">
            </el-table-column>
            <el-table-column label="砍价成功人数" prop="bargain_num">
            </el-table-column>
            <el-table-column label="限量" prop="quota_show">
            </el-table-column>
            <el-table-column label="限量剩余" prop="quota">
            </el-table-column>
            <el-table-column label="结束时间" prop="stop_time">
            </el-table-column>
            <el-table-column label="拼团状态">
                <template slot-scope="{row}">
                    <el-switch v-model="row.status" class="switch" :active-value="1" :inactive-value="0"
                        @change="handleStatusChange($event, row)" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <div class="block" style="margin-right: 50px;float:right;margin-top: 20px;">
            <!-- <span class="demonstration">完整功能</span> -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
        </div>


    </div>
</template>

<script>import { getAll, bargainStatus,bargainDel,searchData} from "@/api/marketing";
export default {
    data() {
        return {
            options: [{
                value: '1',
                label: '开启'
            }, {
                value: '0',
                label: '关闭'
            }],
            tableData: [],
            value: '',
            //下拉框
            input: null,
            currentPage4: null,
        }
    },

    created() {
        this.selectData();
    },
    methods: {
        selectData() {
            getAll().then((response) => {
                console.log(response.data);
                this.tableData = response.data.data
            })
        },
        addto() {
            this.$router.push({ path: '/addto' });
        },
        //状态
        handleStatusChange($event, row) {
            var status = row.status;
            var id = row.id;
            bargainStatus(id, status).then((response) => {
                if (response.code == 20000) {
                    this.$message({ type: 'success', message: '修改成功!' })
                }

            }).catch(() => {
                this.$message({ type: 'fail', message: '修改有误!' })
            })
        },
        handleEdit() { },
        //分页
        handleSizeChange() { },
        handleCurrentChange() { },
        handleDelete(index, row) {
            this.$confirm('你确定要删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                var id = row.id
                bargainDel(id).then((response) => {
                    if (response.code == 20000) {
                        this.selectData()
                    }
                })
                this.$message({ type: 'success', message: '删除成功!' })
            }).catch(() => {
                this.$message({ type: 'success', message: '已取消删除' })
            })
        },
        //下拉框
        getUserList(value,index) {
            var store_name = index;
            var bargainStatus = value;
             searchData(store_name,bargainStatus).then((response) => {
                // if (response.code == 20000) {
                    console.log(response);
                    // this.tableData = response.data.data
                // }
            })
        }
    }


}
</script>